<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <style type="text/css">
    body{
        background-color: #000;
    }
    #c1,#c2,#c3,#c4,#c5,#c6,#c7{
        background-color: #fff;
    }
    #c1 span{
        color: #abc;
    }
    </style>
</head>
<body>
    <!-- 默认宽300px, 高150px -->
    <canvas id="c1" width="200" height="200">
        <span>do not support canvas</span>
    </canvas>
    <canvas id="c2" width="200" height="200"></canvas>
    <canvas id="c3" width="200" height="200"></canvas>
    <canvas id="c4" width="200" height="200"></canvas>
    <canvas id="c5" width="200" height="200"></canvas>
    <canvas id="c6" width="200" height="200"></canvas>
    <canvas id="c7" width="200" height="200"></canvas>
    <script type="text/javascript">


window.onload  = function(){
var oC1 = document.getElementById("c1");
var oGC = oC1.getContext("2d");

oGC.fillStyle = 'rgba(0,0,200,1)';
oGC.strokeStyle = 'rgba(200,0,200,1)';
oGC.lineWidth = 10;
oGC.lineJoin = 'bevel';

oGC.fillRect(50,50,100,100);
oGC.strokeRect(50.5,50.5,100,100);

//-----------------------------
var oC2 = document.getElementById("c2");
var oGC = oC2.getContext("2d");

oGC.beginPath();
oGC.moveTo(50,50);
oGC.lineTo(100,100);
oGC.lineTo(150,100);
oGC.closePath();   //自动和起点闭合
oGC.stroke();

oGC.beginPath();
oGC.moveTo(50,100);
oGC.lineTo(100,150);
oGC.lineTo(150,150);
oGC.closePath();
oGC.fill();   


//-----------------------------
var oC3 = document.getElementById("c3");
var oGC = oC3.getContext("2d");

oGC.beginPath();
oGC.rect(50,50,100,100)
oGC.closePath();
oGC.stroke();

oGC.clearRect(0,0,oC3.width,oC3.height);


//-----------------------------
var oC4 = document.getElementById("c4");
var oGC = oC4.getContext("2d");

oGC.save();
oGC.fillStyle = "red";
oGC.beginPath();
oGC.moveTo(50,50);
oGC.lineTo(100,100);
oGC.lineTo(150,100);
oGC.closePath();   //自动和起点闭合
oGC.fill();
oGC.restore();

oGC.beginPath();
oGC.moveTo(50,100);
oGC.lineTo(100,150);
oGC.lineTo(150,150);
oGC.closePath();
oGC.fill();   
}


//-----------------------------
var oC5 = document.getElementById("c5");
var oGC = oC5.getContext("2d");

oGC.beginPath();
oGC.lineWidth = 20;
oGC.lineCap = 'butt';
oGC.moveTo(30,30);
oGC.lineTo(150,30);
oGC.stroke();
oGC.closePath();

oGC.beginPath();
oGC.lineCap = 'round';
oGC.moveTo(30,70);
oGC.lineTo(150,70);
oGC.stroke();
oGC.closePath();

oGC.beginPath();
oGC.lineCap = 'square';
oGC.moveTo(30,110);
oGC.lineTo(150,110);
oGC.stroke();
oGC.closePath();


//-----------------------------画线
var oC6 = document.getElementById("c6");
var oGC = oC6.getContext("2d");

console.log(oC6.offsetLeft,oC6.offsetTop)
oC6.onmousedown = function(e){
    var e = e || window.event;
    oGC.moveTo(e.clientX-oC6.offsetLeft, e.clientY-oC6.offsetTop);

    document.onmousemove = function(e){
        var e = e || window.event;
        oGC.lineTo(e.clientX-oC6.offsetLeft, e.clientY-oC6.offsetTop);
        oGC.stroke();
    }

    document.onmouseup = function(e){
        document.onmousemove = null;
        document.onmouseup = null;
    }
}


//--------------------------------方块运动
var oC7 = document.getElementById("c7");
var oGC = oC7.getContext("2d");
var num = 0;
var timer = setInterval(function(){
    num ++;
    oGC.clearRect(0,0,oC7.width,oC7.height);
    oGC.fillRect(num, num, 40, 40);
    if(num == 100){
        clearInterval(timer);
    }
},100)

   </script>
</body>
</html>